<template>
	<view class="user-card-holder">
		<ul class="menu">
			<li class="item" @click="handleOnEditMe">
				<text class="label">编辑我的名片</text>
				<image src="/static/right.svg" style="width: 24rpx;height: 24rpx;"></image>
			</li>
			<li class="item" @click="handleOnLogout">
				<text class="label">退出登录</text>
				<image src="/static/right.svg" style="width: 24rpx;height: 24rpx;"></image>
			</li>
		</ul>
	</view>
</template>

<script setup>
	import { useAuthStore } from '../../store/auth'

	// methods
	const handleOnLogout = () => {
		uni.showModal({
			title: '提醒',
			content: '是否确认退出登录？',
			success(res) {
				if (!res.confirm) return
				useAuthStore().logout().finally(() => {
					uni.reLaunch({ url: '/pages/index/index' })
				})
			},
			fail() {}
		})
	}
	const handleOnEditMe = () => {
		uni.navigateTo({ url: '/pages/user/edit' })
	}
</script>

<style lang="scss" scoped>
	.menu {
		display: flex;
		flex-direction: column;

		&>.item {
			display: flex;
			align-items: center;
			padding: 40rpx 80rpx;
			border-bottom: 1px solid #eeeeee;
			color: #515151;

			&>.label {
				flex: 1;
			}
		}
	}
</style>